import React from 'react'
import { AppWrapper, FooterWrapper, H2Wrapper, UserItemWrapper,  ICButton, ICDangerButton, ICPrimaryButton, ICSuccessButton } from './app-css'
import { ThemeProvider } from 'styled-components'
import Home from './home'

class App extends React.PureComponent {
  constructor() {
    super()
    this.state = {
      fontSize: 30,
      color: '#333',
      secondColor: '#787878'
    }
  }
  changeColor() {
    this.setState({
      color: 'blue'
    })
  }
  render () {
    const { fontSize, color, secondColor } = this.state
    return (
      <ThemeProvider theme={{ color: 'purple', fontSize: 28 }}>
        <AppWrapper>
          <ICButton>修改颜色</ICButton>
          <ICPrimaryButton>修改颜色</ICPrimaryButton>
          <ICDangerButton>修改颜色</ICDangerButton>
          <ICSuccessButton>修改颜色</ICSuccessButton>
          <Home />
          <button onClick={() => this.changeColor()}>修改颜色</button>
          <UserItemWrapper fontSize={fontSize} color={color}>
            <div className='user-item__left'>
            <div className='user-item-name'>张三</div>
              <div className='user-item-desc'>个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介个人简介</div>
            </div>
            <div className='user-item__right'>
              <div className='user-item-avatar'>头像</div>
            </div>
            <div className='user-item-action'>
              <div className='user-item-action-item'>删除</div>
              <div className='user-item-action-item'>编辑</div>
            </div>
          </UserItemWrapper>
          <H2Wrapper>哈哈哈哈哈</H2Wrapper>
          <div className='tips'>哈哈哈哈哈</div>
          <FooterWrapper>
            <div className='footer-links'>友情链接</div>
            <div className='footer-copyright'>版权声明</div>
          </FooterWrapper>
        </AppWrapper>
      </ThemeProvider>
    )
  }
}

export default App